<template>
	<view>
		<!-- <ljshop-navbar :background="{ background: 'none' }" :backTextStyle="{ color: '#000' }" backText="提现" backIconColor="#fff"></ljshop-navbar> -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="cu-custom" style=" height: 160rpx; position: fixed;">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="cu-custom" style=" height: 160rpx;padding-top: 40rpx; position: fixed;">
				<!-- #endif -->
				<view class="cu-bar u-flex u-row-between" style="height: 60rpx;margin-top: 50rpx;">
					<view class="action u-flex" @tap="goBack">
						<view class="u-iconfont uicon-arrow-left" style="font-size: 36rpx;"></view>
					 <view style="color:#000;font-size: 36rpx; margin-left: 40rpx;font-weight: bold;">{{storename}}</view> 
					</view>
				
					<!-- #ifdef MP-WEIXIN -->
					<image class="user-level-image"  @click="goStore" src="https://image.hzwltb69.com/app/images/kfstore.png"> </image> 
						<!-- #endif -->
						<!-- #ifdef  APP-PLUS || H5 -->
						<image class="user-level-image" style="	margin-right: 20rpx;"  @click="goStore" src="https://image.hzwltb69.com/app/images/kfstore.png"> </image> 
							<!-- #endif -->
					<!-- #ifdef APP  || H5  -->
					 <!-- <view style="margin-right: 30rpx;" @tap="sendtoservcer">举报</view> --> 
					<!-- #endif -->
				</view>
			</view>
			<view v-if="goodsCardShow" class="goods-cardinfo">
								<view class="img-box">
									<image :src="goodsInfo.img" alt="" />
								</view>
								<view class="content-box">
									<view class="title">
										{{goodsInfo.name}}
									</view>
									<view class="pirce">
										{{goodsInfo.price}}
									</view>
								</view>
								<view class="goGoods-box">
			<!-- 						<view class="del" @click="goodsCardShow = false">
										x
									</view> -->
									<view class="goshop" @click="goInfo(goodsInfo.id)">
										去购买
									</view>
								</view>
							</view>
			<view class="chat-main" ref="scrollDiv" > 
			<!-- 存在自定义nav导航 需要给padding-top 高度 -->
			<!-- show-pd 如果是商品进入 那么需要加高pt -->
				<scroll-view
				:scroll-y="true"
				 @scroll="scroll"
				 :scroll-top="scrollTop"
				style="display: flex;flex-direction: column;flex-wrap: warp;height: 100vh;padding-top: 200rpx;position: relative;"
				:style="{'padding-bottom': height}"
				:class="{'show-pd': goodsCardShow}"
				>
					<view class="chat-items" style="padding-bottom: 15rpx;" v-for="(item, index) in msgList" :key="index">
						<view>
							<view>
								<view v-if="item.msg.senderUserId==targetId"
									style="padding-left: 30rpx;display: flex;flex-direction: column;">
									<view
										style="display: flex;justify-content: center;align-items: center;padding: 30rpx;">
										<text style="font-size: 24rpx;color: #272832;">{{toTime(item.sentTime)}}</text>
									</view>
									<view style="display: flex;flex-direction: row;justify-content: flex-start;">
										<view
											style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start;">
											<image style="width: 80rpx;height: 80rpx;border-radius: 50%" :src="logo">
											</image>
											<!-- <text
												style="text-align: center;font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(39, 40, 50, 1);">{{storename}}</text> -->
										</view>
										<view
											style="position: relative;margin-left: 50rpx;margin-right: 100rpx;background: rgba(255, 255, 255, 1);border-radius: 20rpx;padding: 20rpx;">
											<!-- <text class="user-text"
												style="font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(39, 40, 50, 1);">{{item.msg.content}}</text> -->
										<text v-if="!item.msg.src" class="user-text" style="font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(39, 40, 50, 1);">{{item.msg.content}}</text>
										<img v-if="item.msg.src" @click="onLookBigImage(item.msg.src)" :src="item.msg.src" style="width: 200rpx;height: 200rpx;" alt="">
										</view>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view>
								<!-- 我发送的 -->
								<view
								v-if="item.msg.senderUserId==memberId && item.msg.targetId==targetId"
								class="myCon">
									<!-- 时间框 -->
									<view class="times">
										 <text class="timeCon">{{ toTime(item.sentTime)}}</text> 
									</view>
									<!-- 聊天消息框 -->
									<view class="chat-big">
										<!-- 头像框 -->
										<view class="avatar">
											<image :src="userinfo.messageLogo"></image>
											<!-- <text style="text-align: center;font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(39, 40, 50, 1);">{{userinfo.mobile}}</text> -->
										</view>
										<!-- 消息框 -->
										<view class="chat-content" >
											<!-- 三角 -->
											<view class="chat-jiao" ></view>
											<!-- 聊天内容 -->
											<text v-if="!item.msg.src" class="chat-body" >{{item.msg.content}}</text>
											<!-- <text v-if="!item.msg.src" class="user-text" style="font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(39, 40, 50, 1);">{{item.msg.content}}</text> -->
											<img v-if="item.msg.src" @click="onLookBigImage(item.msg.src)" :src="item.msg.src" style="width: 200rpx;height: 200rpx;" alt="">
										</view>
									</view>
								</view>
								<!-- <view v-if="item.msg.senderUserId==memberId && item.msg.targetId==targetId"
									style="padding-left: 30rpx;display: flex;flex-direction: column;">
									<view
										style="display: flex;justify-content: center;align-items: center;padding: 30rpx;">
										<text style="font-size: 24rpx;color: #272832;">{{ toTime(item.sentTime)}}</text>
									</view>
									<view
										style="display: flex;flex-direction: row-reverse;justify-content: flex-start;">
										<view
											style="padding: 10rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;">
											<image style="width: 80rpx;height: 80rpx;border-radius: 50%"
												:src="userinfo.messageLogo">
												</image>
										</view>
										<view
											style="position: relative;display: flex;align-items: center;margin-left: 100rpx;margin-right: 30rpx;border-radius: 20rpx;padding: 10rpx;color: #000;background: #89d961;">
											<view
												style="position: absolute;display: inline-block;top: 30rpx;width: 0rpx;height: 0rpx;border-width: 16rpx 0rpx 16rpx 36rpx;right: -36rpx;border-style: solid;border-color: transparent transparent transparent #89d961;">
											</view>
											<text
												style="font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;line-height: 30rpx;">{{item.msg.content}}</text>
										</view>
									</view>
								</view> -->
							<!-- 结束 -->
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view style="position: fixed;
			bottom: 0rpx;
		display: flex;
		width: 100%;
		flex-direction: row;
		margin-top: 20rpx;
		height: 160rpx;
		background: #FFFFFF;box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);"
		:style="{bottom: inputHeight}"
		>
				<view style="padding-left: 12rpx;
			padding-right: 12rpx;
			display: flex;
			align-items: center;">
					<!-- <image src="/static/image/index/yuyin.png"></image> -->
				</view>
				<view class="input-box">
					<input style="width: 550rpx;
				height: 72rpx;
				margin-top: 10rpx;
				background: #f7f7f7;
				border-radius: 10rpx;"
				type="text"
				value=""
				v-model="words"
				:adjust-position="false"
				placeholder="请输入发送的内容"
				:confirm-hold="true"
				@focus="inputBindFocus"
				@blur="inputBindBlur"
				@confirm="sendPravte"
				confirm-type="send"
				 />
				</view>
				<view style="width: 188rpx;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-evenly;">
					<!--	 <image src="/static/image/index/biaoqin.png"></image>
			<image src="/static/image/index/add.png"></image> -->
			<image style="	width: 56rpx;
			height: 56rpx;" src="https://image.hzwltb69.com/app/images/kfpic.png" @click="sendImageMessage"></image>
					<image style="	width: 56rpx;
				height: 56rpx;" src="https://image.hzwltb69.com/app/images/send.png" @click="sendPravte"></image>
					<!-- <button @click="sendPravte">发送</button>-->
				</view>
			</view>
		</view>
</template>

<script>
import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	//ryGlobalData是全局，去main.js
	export default {
		data() {
			return {
				title: 'Hello',
				msgList: [],
				textMsg: '',
				words: '',
				name: '',
				img: '',
				storeId: "",
				logo: '',
				userinfo: uni.getStorageSync("userinfo"),
				targetId: "",
				storename: "",
				memberId: "",
				resultList: "",
				inputHeight: '0rpx',
				scrollTop: -1,
				// 下顶标准值为 160rpx
				height: "160rpx",
				old: {
				scrollTop: 0
				 },
				 goodsInfo:{
					 img: '',
					 name: '',
					 id: '',
					 price: '',
				 },
				 goodsCardShow: false,
				 businessId: '',
			}
		},
		onLoad(e) {
			//连接融云
			// 商店id
			// this.storeId = this.$Route.query.id;
			// 商家id
			this.logo = this.$Route.query.logo;
			this.storename = this.$Route.query.name;
			// 商店id
			if(e.id) this.storeId = e.id
			if(this.$Route.query.id) this.storeId = this.$Route.query.id
			// 商品信息判断
			if(this.$Route.query.goods){
				// 商品入口替换 商家聊天id
				this.goodsInfo = this.$Route.query.goods
				this.businessId = this.$Route.query.businessId
				this.goodsCardShow = true
			}else{
				// 商铺入口替换 商家聊天id
				this.businessId = this.$Route.query.businessId
				 
			}
			this.targetId = "business" + this.businessId;
			this.memberId = "member" + uni.getStorageSync("UId")

			this.name = this.userinfo.name
			this.getStore();
			uni.setNavigationBarTitle({
				title: this.storename
			})
			this.connectRy();
		},
		methods: {
			// 浏览大图
			onLookBigImage(e){
				console.log(e);
				uni.previewImage({
					urls:[e]
				})
			},
			goInfo(e){
				console.log(e);
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: e
					}
				})
			},
			goStore(){
				let that = this
				console.log(this.storeId,'id========================');
				uni.setStorageSync("detailStoreId", this.storeId)
				this.$Router.push({
					path: '/pages/store/index',
					query: {
						id: this.storeId
					}
				})
				// that.$Router.push({
				// 	path: '/pages/store/index',
				// 	query: {
				// 		id: this.shangdianId
				// 	}
				// })
			},
			// 键盘弹出
			inputBindFocus(e){
				let that = this
			 console.log("弹出！！！！！！！！");
				that.height = parseInt(e.detail.height) + parseInt(that.height)
				that.height = that.height + 'px'
				that.inputHeight = e.detail.height + 'px'
				that.goEnd()
				console.log(that.height);
			},
			// 键盘隐藏
			inputBindBlur(){
				let that = this
				that.height = '160rpx'
				that.inputHeight = 0 + 'rpx'
				console.log(that.height);
			},
			getStore(){
				this.$http(
					'store.nogetdetail', {
						storeId: this.storeId
					},
				).then(res => {
					uni.hideLoading()
			 
					if (res.code === 1) {
					 
					 uni.setNavigationBarTitle({
					 	title: res.store.name
					 })
					 this.logo = res.store.logo;
					 this.storename = res.store.name;
					 
					} else {
				
					}
				});
			},
			connectRy() {
				//判断是否连接，连接了直接获取聊天列表
				if (this.ryGlobalData.ryStatus.status !== 99) {
					this.getMsgList()
					return
				}

				let that = this;
				let token = ""
				//uni.showLoading({})
				that.$http(
					'common.rongyun', {
						memberId: uni.getStorageSync("UId"),
						refresh: false
					},
				).then(res => {
					
					if (res.code == 200) {
						token = res.token;
						this.ryConnet(token)
					}
				});
				//this.ryConnet()		 
			},
			ryConnet(token) { // 连接
				var im = this.ryGlobalData.ryStatus.RongIMLib
				 
				let _t = this
				//token，去找后台要，不给就锤他
				let ry_token = token
				//let ry_token="hwqrppVQNicng1peuiTz9JGeaCBDOoa2MKx0svgqBPA=@dxbv.cn.rongnav.com;dxbv.cn.rongcfg.com"
				im.connect(token).then((user) => {
					// console.log('获取成功！！！！！！！！！！！！！！！');
					// _t.userRyId = user.id
					// setTimeout(() => {
					// 	_t.title = '连接成功'
					// }, 200000)
					// im.Conversation.getList().then(function(conversationList) {
					// 	//console.log('获取会话列表成功', conversationList);
					// 	_t.$store.commit('setConversationList', conversationList) //会话列表存入rystore
					// });
					// im.watch({
					// 	message: function(event) {
					// 		var message = event.message;
					// 		_t.setmsg(event)
					// 	},
					// });
					// 开启监听回调 接收消息
					const Events = im.Events
					const listener = (evt) => {
					 // console.log(evt.messages,'监听消息回调')
					  let message = evt.messages[0]
					  if(evt.messages[0].content.imageUri){
					  	 console.log('存在图片',evt.messages[0].content.imageUri);
					  }
					  let obj = {
					  	// type: message.data.type,
					  	messageType: message.messageType,
					  	sentTime: message.sentTime,
					  	msg: {
					  		targetId: message.targetId,
					  		senderUserId: message.senderUserId,
					  		content: message.content.content,
							src: evt.messages[0].content.imageUri ? evt.messages[0].content.imageUri : ''
					  	}
					  }
					  _t.msgList.push(obj)
					  console.info(JSON.stringify(_t.msgList))
					  _t.goEnd()
					  
					  //监听消息设为已读---黄
					  const conversationType = RongIMLib.ConversationType.PRIVATE;
					  const targetId = this.targetId;
					  im.clearMessagesUnreadStatus({
					  	conversationType,
					  	targetId
					  }).then(res => {
					    if (res.code === 0) {
					      console.log(res.code,res)
					    } else {
					      console.log(res.code, res.msg)
					    }
					  })
					};
					im.addEventListener(Events.MESSAGES, listener)
					_t.getHistoryMsgList()
				}).catch(function(error) {
					
				});
			},
			setmsg(v) {
				let _t = this
			
				let obj = {
					type: v.message.type,
					messageType: v.message.messageType,
					sentTime: v.message.sentTime,
					msg: {
						targetId: v.message.targetId,
						senderUserId: v.message.senderUserId,
						content: v.message.content.content,
						imageUri: v.message.content.imageUri || ''
					},

				}
				_t.msgList.push(obj)

			},
			getHistoryMsgList() { //获取历史消息列表
				let _t = this
				//id，去找后台要，不给就锤他
				let ry_service_uid = this.targetId
				
				// 融云实例
				const RongIMLib = this.ryGlobalData.ryStatus.RongIMLib
				// 查询参数1
				var conversation = {
					targetId: ry_service_uid,
					conversationType: RongIMLib.ConversationType.PRIVATE
				};
				// 查询时间参数
				var option = {
					    timestamp: 0,
					    count: 100,
					    order: 0
				};
				RongIMLib.getHistoryMessages(conversation, option).then(function(result) {
					var list = result.data.list; // 历史消息列表
					let arr = []
					if (list.length > 0) {
			
						list.forEach((v, k) => {
							let obj = {
								type: v.type,
								messageType: v.messageType,
								sentTime: v.sentTime,
								msg: {
									targetId: v.targetId,
									senderUserId: v.senderUserId,
									content: v.content.content,
									imageUri: v.content.imageUri || '',
									src: v.content.imageUri ? v.content.imageUri : ''
								}
							}
							arr.push(obj)
						})
						
						//新增是否长时间没有联系
						if(Math.round((new Date().getTime()-arr[arr.length-1].sentTime)/1000/24/3600)>5){
							_t.getWelcome();
						}
						//_t.msgList = arr;
						//修改为添加而不是赋值---黄
						_t.msgList = _t.msgList.concat(arr)
						
						 
						_t.goEnd()
						// 清除未读
						const conversationType = RongIMLib.ConversationType.PRIVATE;
						const targetId = ry_service_uid;
						RongIMLib.clearMessagesUnreadStatus({
							conversationType,
							targetId
						}).then(res => {
						  if (res.code === 0) {
						    console.log(res.code,res)
						  } else {
						    console.log(res.code, res.msg)
						  }
						})
							
					} 
					else { //新增是否第一次联系
						_t.getWelcome();
					}
					
				});
			},
			// 发送文字消息  消息有很多种，融云api有写
			sendPravte() {
				// return
				//this.hideDrawer();//隐藏抽屉
				this.textMsg = this.words; //清空输入框
				if (!this.textMsg) {
					return;
				}
				// let content = this.replaceEmoji(this.textMsg);
				// let msg = {text:content}
				let msg = this.textMsg
				this.sendMsg(msg, 'text');
				this.words = ""
				this.textMsg = ""
				this.goEnd()
			},
			// 发送消息 => 图片消息
			sendImageMessage(){
				let that = this
				uni.chooseImage({
					count: 1,
					success(e) {
						uni.uploadFile({
							url: 'https://www.hzwltb69.com/api/common/file/uploadFolderImage',
							filePath: e.tempFilePaths[0],
							file: e.tempFiles[0],
							name: 'file',
							formData:{
								imageType: 'SOURCE',
								imageUploadPath: 'rong'
							},
							success(e) {
								let src = JSON.parse(e.data).url
								that.sendImg(src)
							}
						})
					}
				})
				
			},
			sendImg(e){
				console.log('执行',e);
				let file = e
				let _t = this
				let ry_service_uid = this.targetId
				// 配置融云参数
				const RongIMLib = this.ryGlobalData.ryStatus.RongIMLib
				var conversation = {
					targetId: ry_service_uid,
					conversationType: RongIMLib.ConversationType.PRIVATE,
				};
				// //文件列表
				// const msgBody = {
				//   file, // 待上传文件
				//   extra: {
				//   	nickname: uni.getStorageSync("userinfo") .mobile,
				//   	avatar: uni.getStorageSync("userinfo").avatar,
				//   	fromId: `member${_t.userinfo.id}`,
				//   	toId: _t.targetId,
				//   	name: _t.info.name,
				//   	icon: _t.info.icon
				//   }
				// }
				// // 回调
				// const hooks = {
				//   onProgress (progress) {
				// 	  console.log(progress);
				//   },  // 上传进度监听，可选
				//   onComplete (fileInfo) { // 上传完成时的回调钩子，可选
				//   console.log('上传完成了======================');
				//     console.log(fileInfo.url) // 文件存储地址
				//     // 如果需要构建自定义消息，return new ABCMesssage('')
				//     // ABCMesssage 定义通过自定义消息实现 `const ABCMesssage = RongIMLib.registerMessageType(...)`
				//     // 无 return 返回值的情况下，SDK 默认发送 FileMessage
				//   }
				// }
				
				// 图片内容
				const message = new RongIMLib.ImageMessage(
				{ 
				content: '',
				imageUri:e,
				extra: {
					nickname: uni.getStorageSync("userinfo") .mobile,
					avatar: uni.getStorageSync("userinfo").avatar,
					fromId: `member${_t.userinfo.id}`,
					toId: _t.targetId,
					name: _t.storename,
					icon: _t.logo
				}
				})
				// 回调
				const options = {
					  // 如果需要发送 @ 消息，isMentioned 需设置为 true
					  isMentioned: false,
					  // 消息发送前的回调，可以使用此回调返回的 message 用于列表渲染
					  onSendBefore: (message) => {
					    console.log('消息发送前的回调', message)
					  }
				}
				// 发送
				RongIMLib.sendMessage(
				  conversation,
				  message,
				  options,
				).then( message => {
					if(message.code == RongIMLib.ErrorCode.SUCCESS){
						// 我发送的图片消息回显
						let obj = {
							// type: message.data.type,
							messageType: message.data.messageType,
							sentTime: message.data.sentTime,
							msg: {
								targetId: message.data.targetId,
								senderUserId: message.data.senderUserId,
								content: message.data.content.content,
								src: message.data.content.imageUri ? message.data.content.imageUri : ''
							}
						}
						_t.msgList.push(obj)
						_t.goEnd()
					}
					
				})
			},
			// 发送消息 => 简单文字消息
			sendMsg(contentVal, type) {
				let _t = this
				let ry_service_uid = this.targetId
				// const im = this.ryGlobalData.ryStatus.im
				const RongIMLib = this.ryGlobalData.ryStatus.RongIMLib
				var conversation = {
					targetId: ry_service_uid,
					conversationType: RongIMLib.ConversationType.PRIVATE,
				};
				const message = new RongIMLib.TextMessage({
					content: contentVal,
					extra: {
						nickname: uni.getStorageSync("userinfo") .mobile,
						avatar: uni.getStorageSync("userinfo").avatar,
						fromId: `member${_t.userinfo.id}`,
						toId: _t.targetId,
						name: _t.storename,
						icon: _t.logo
					}
				})
				const options = {
					  // 如果需要发送 @ 消息，isMentioned 需设置为 true
					  isMentioned: false,
					  // 消息发送前的回调，可以使用此回调返回的 message 用于列表渲染
					  onSendBefore: (message) => {
					    console.log('消息发送前的回调', message)
					  }
				}
				RongIMLib.sendMessage(conversation,message,options).then(function(message) {
					if(message.code == RongIMLib.ErrorCode.SUCCESS){
						let obj = {
							type: message.data.type,
							messageType: message.data.messageType,
							sentTime: message.data.sentTime,
							msg: {
								targetId: message.data.targetId,
								senderUserId: message.data.senderUserId,
								content: message.data.content.content,
							}
						}
						
						_t.msgList.push(obj)
						_t.goEnd()
					}
				}, err => {
					console.log(err, 'err')
				});
			},
			handleScrollBottom() {
				this.$nextTick(() => {
					let scrollElem = this.$refs.scrollDiv;
					scrollElem.scrollTo({
						top: scrollElem.scrollHeight,
						behavior: 'smooth'
					});
				});
			},
			goBack() {
				uni.navigateBack();
			},
			sendtoservcer() {
				this.$Router.push({
					path: '/pages/kefu/pingtaikefu',

				});
			},
			toTime(time) {
				var date = new Date(time);
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
				var h = date.getHours() + ":";
				var m = date.getMinutes() + ":";
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			 
			scroll(e) {
			// console.log(e)
			this.old.scrollTop = e.detail.scrollTop
			},
			goEnd(){
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 9999999999
					});
			},
			//获取欢迎语
			getWelcome(){
				this.$http(
					'common.welcome', {
						memberId: uni.getStorageSync("UId"),
						storeId: this.storeId
					},
				).then(res => {
					 
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: f1f1f1;
	}

	.user-text:before {
		position: absolute;
		content: "\00a0";
		width: 0rpx;
		height: 0rpx;
		border-width: 16rpx 36rpx 16rpx 0;
		border-style: solid;
		border-color: transparent #FFFFFF transparent transparent;
		top: 30rpx;
		left: -36rpx;
	}

	.cu-custom {
		width: 100%;
		border-bottom: #ccc 1rpx solid;
		z-index: 999;
		background: #fff;
		 
	}

	.cu-bar {
		width: 100%;

		.content {
			width: 560rpx;
			display: flex;
			flex-direction: row;
			flex: 1;
			align-items: center;
			pointer-events: auto;
		}
	}
	// 我发的消息
	.myCon{
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;
		.times{
			display: flex;
			// justify-content: center;
			justify-content: flex-end;
			align-items: center;
			padding: 30rpx;
			.timeCon{
				font-size: 24rpx;
				color: #272832;
			}
		}
		.chat-big{
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-start;
			margin-bottom: 15rpx;
		}
		.avatar{
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%
			}
		}
		.chat-content{
			position: relative;
			display: flex;
			align-items: center;
			margin-left: 100rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			// color: #000;
			background: #518cff;
			padding-left: 20rpx;
			padding-right: 20rpx;
			color: #fff;
			.chat-jiao{
				position: absolute;
				display: inline-block;
				top: 30rpx;
				width: 0rpx;
				height: 0rpx;
				border-width: 16rpx 0rpx 16rpx 26rpx;
				right: -26rpx;
				border-style: solid;
				border-color: transparent transparent transparent #518cff;
			}
			.chat-body{
				font-size: 28rpx;
				font-family: PingFangSC-Regular,
				 PingFang SC;font-weight: 400;
				 line-height: 30rpx;
			}
		}
	}
	.user-level{
		font-size: 28rpx;
		font-weight: 500;
		// color: #fda22a;
		color: #f86522;
		line-height: 30rpx;
		padding: 10rpx;
		width: 130rpx;
		text-align: center;
		// margin-top: 15rpx;
		margin-bottom: 15rpx;
		background-color: #fff;
		border-radius: 15rpx;
		border: #f86522 1rpx solid;
	}
	.user-level-image{
	 

	
	
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		
		 
	}
	.devs{
		transition: all .3s;
		color: #fff !important;
		background-color: #f86522 !important;
	}
	// 商品浮窗卡片
	.goods-cardinfo{
		display: flex;
		align-items: center;
		// margin: 0 32rpx 0 28rpx;
		padding: 20rpx;
		// width: 700rpx;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		// border-radius: 30rpx;
		position: fixed;
		top: 160rpx;
		left: 0;
		z-index: 999;
		// justify-content: space-around;
		.img-box{
			width: 150rpx;
			height: 130rpx;
			// background-color: skyblue;
			border-radius: 15rpx;
			image{
				width: 150rpx;
				height: 130rpx;
				border-radius: 15rpx;
			}
		}
		.content-box{
			width: 350rpx;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			.title{
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.pirce{
				margin-top: 30rpx;
				color: #f86522;
			}
		}
		.goGoods-box{
			.del{
			    margin-left: 120rpx;
			}
			.goshop{
				// margin-top: 30rpx;
				margin-left: 30rpx;
				width: 150rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				background: linear-gradient(to right, #fa7d23, #f86323);
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}
	// 兼容商品卡片 下移
	.show-pd{
		padding-top: 330rpx !important;
	}
</style>